<template>
  <MainBox :loading="data.loading" :loadingMsg="data.loadingMsg" :paddingMain="0">
    <template #left v-if="data.tabs">
      <ListBox isOverflow :active="data.tabs.active" :activeKey="data.tabs.activeKey" :data="data.tabs.list" @onClick="
        (row: any, index: any) => {
          clickFunction(data.tabs.click, row, index);
        }
      ">
        <template #default="{ row }">
          {{ row[data.tabs.titleKey] }}
        </template>
        <template #btn="{ row, index }"
          v-if="data.tabs.operation && Array.isArray(data.tabs.operation) && data.tabs.operation.length > 0">
          <IconBox :icon="item.icon" :title="item.title" @onClick="clickFunction(item.click, row, index)"
            v-for="item in data.tabs.operation" />
        </template>
      </ListBox>
    </template>
    <template #leftHeadBtn v-if="data.tabs && data.tabs.clickAdd">
      <el-link type="primary" icon="Plus" @click="clickFunction(data.tabs.clickAdd)">新建</el-link>
    </template>
    <template #leftHead>
      <h3>{{ data.tabs.title }}</h3>
    </template>
    <template #tabHead v-if="tabs">
      <ElRadioBox isButton :data="dataInfo" dataName="active" :options="tabs"></ElRadioBox>
    </template>
    <template #default>
      <slot :on="dataInfo.active"></slot>
    </template>
  </MainBox>
  <DrawerJson :json="data" />
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    isActive?: Function; //
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
    tabs?: any; //多选
  }>(),
  {},
);
const dataInfo: any = reactive({
  active: '',
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'searchBtn'): void;
}>();
const clickFunction = (click: Function, row?: any, index?: number) => {
  if (click && typeof click === 'function') {
    return click(row, index);
  } else {
    return '';
  }
};
</script>
<style scoped lang="scss"></style>
